<template>
  <div class="contaiter">
    <el-form
      ref="internshipDesire"
      :model="internshipDesire"
      :rules="rules"
      label-position="left"
      label-width="150px"
    >
      <el-form-item label="期望职位" required prop="jobName">
        <span slot="label" class="left-label">
          <span calss="cn-label">期望职位</span><br>
          <span class="en-label">Position Applied</span>
        </span>
        <el-input
          v-model="internshipDesire.jobName"
          placeholder="请输入期望职位,如：销售经理"
          style="width: 50%"
        />
      </el-form-item>
      <el-form-item label="期望行业" required prop="expectedIndustry">
        <span slot="label" class="left-label">
          <span calss="cn-label">期望行业</span><br>
          <span class="en-label">Industry Preferences</span>
        </span>
        <el-cascader
          v-model="internshipDesire.expectedIndustry[0]"
          style="width: 50%"
          :options="areaDict"
          :show-all-levels="false"
          placeholder="请选择期望行业，如：互联网/电子商务"
          @change="businessAreaChange"
        />
      </el-form-item>
      <el-form-item label="期望城市" required prop="targetCity">
        <span slot="label" class="left-label">
          <span calss="cn-label">期望城市</span><br>
          <span class="en-label">Target City</span>
        </span>
        <el-cascader
          v-model="internshipDesire.targetCity"
          style="width: 50%"
          :options="provinceAndCityData"
          :show-all-levels="false"
          placeholder="请选择期望城市"
          @change="handleCityChange"
        />
      </el-form-item>
      <el-form-item label="薪资要求" prop="highestSalary">
        <span slot="label" class="left-label">
          <span calss="cn-label">薪资要求</span><br>
          <span class="en-label">Target Salary</span>
        </span>
        <el-input
          v-model="internshipDesire.lowestSalary"
          placeholder="最低"
          type="number"
          style="width: 220px"
        />
        —
        <el-input
          v-model="internshipDesire.highestSalary"
          placeholder="最高"
          type="number"
          style="width: 220px"
        />
        <div class="right-label">
          <span class="cn">元/天</span><br>
          <span class="en">Yuan per day</span>
        </div>
      </el-form-item>
      <el-form-item label=" ">
        <el-button @click="cancel">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm('internshipDesire')"
        >确定</el-button>
        <el-popconfirm
          v-if="showDel"
          title="确定删除吗？"
          class="delete-icon"
          @confirm="deleteConfirm"
        >
          <i slot="reference" class="delete-icon" />
        </el-popconfirm>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  provinceAndCityData,
  getAreaDict,
  getProvinceAndCityDataLabel,
  getProvinceAndCityDataValue
} from '@/utils/frontDataDict.js'
export default {
  props: {},
  data() {
    var highestSalaryValidator = (rule, value, callback) => {
      if (this.internshipDesire.lowestSalary == '') {
        callback(new Error('请输入最低薪资'))
      }
      if (value === '') {
        callback(new Error('请输入最高薪资'))
      } else if (
        parseInt(value) < parseInt(this.internshipDesire.lowestSalary)
      ) {
        callback(new Error('最高薪资不能低于最低薪资!'))
      } else {
        callback()
      }
    }
    var expectedIndustryValidator = (rule, value, callback) => {
      if (value[0] == '') {
        callback(new Error('请选择期望行业'))
      } else {
        callback()
      }
    }
    return {
      provinceAndCityData,
      areaDict: [],
      internshipDesire: {
        // 实习意向
        jobName: '', // 期望职位
        expectedIndustry: ['', '', ''], // 期望行业
        targetCity: '', // 工作城市
        lowestSalary: '', // 最低薪资
        highestSalary: '' // 最高薪资
      },
      rules: {
        jobName: [
          { required: true, message: '请输入职位名称', trigger: 'blur' }
        ],
        expectedIndustry: [
          { validator: expectedIndustryValidator, trigger: 'change' }
        ],
        targetCity: [
          { required: true, message: '请选择工作城市', trigger: 'change' }
        ],
        lowestSalary: [
          { required: true, message: '请输入最低薪资', trigger: 'blur' }
        ],
        highestSalary: [{ validator: highestSalaryValidator, trigger: 'blur' }]
      },
      index: null,
      showDel: false
    }
  },
  created() {},
  mounted() {
    this.areaDict = getAreaDict()
  },
  methods: {
    businessAreaChange(e) {
      console.log(e)
    },
    handleCityChange(e) {
      console.log(e)
    },
    cancel() {
      this.internshipDesire = {
        jobName: '', // 期望职位
        expectedIndustry: ['', '', ''], // 期望行业
        targetCity: '', // 工作城市
        lowestSalary: '', // 最低薪资
        highestSalary: '' // 最高薪资
      }
      this.showDel = false
      this.index = null
      this.$parent.$parent.closeFun('internshipDesire')
      this.$nextTick(() => {
        this.$refs['internshipDesire'].clearValidate()
      })
    },
    deleteConfirm() {
      this.$parent.$parent.deleteFun('internshipDesire', this.index)
      this.cancel()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = JSON.parse(JSON.stringify(this.internshipDesire))
          data.targetCity = getProvinceAndCityDataLabel(data.targetCity)
          data.expectedIndustry[0] = data.expectedIndustry[0][1]
          this.$parent.$parent.upDate(
            'internshipDesire',
            data,
            this.index
          )
          this.cancel()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    init(data, index) {
      data = JSON.parse(JSON.stringify(data))
      data.targetCity = getProvinceAndCityDataValue(data.targetCity)
      this.internshipDesire = data
      this.index = index
      this.showDel = true
    }
  }
}
</script>

<style lang="scss" scoped>
.delete-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url("../../../../assets/images/delete_icon.png") no-repeat center
    center / cover;
}
::v-deep .right-label {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 40px;
  overflow: hidden;
  vertical-align: middle;
  .cn {
    display: inline-block;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #969696;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 10px;
  }
  .en {
    display: inline-block;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597a0;
    line-height: 20px;
    position: absolute;
    bottom: 0;
    left: 10px;
  }
}
</style>
